{% stylesheet %}
.block_topic .topic_list ul {
  display: grid;
  row-gap: 40px;
  column-gap: 30px;
  grid-template-columns: repeat(2, calc(50% - 15rem));
}

.block_topic .topic_list_3 ul {
  grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_topic .topic_list_4 ul {
  grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_topic .topic_list_5 ul {
  grid-template-columns: repeat(5, calc(20% - 24px));
}

.block_topic .topic_list li {
  list-style-type: none;
  overflow: hidden;
}

.block_topic .topic_iamge {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.block_topic .topic_iamge .block_iamge_pic {
  width: 100%;
  height: 100%;
}

.block_topic .topic_iamge img {
  width: 100%;
}

.block_topic .topic_iamge .block_iamge_name {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 24px;
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}

.block_topic .topic_time {
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.block_topic .topic_name {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--title_color);
  font-size: var(--product_font_size);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.block_topic .topic_descript {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--detail_color);
}

.block_topic .topic_more {
  color: var(--detail_color);
  text-decoration: underline;
  transition: all 0.3s;
}

.block_topic .topic_more:hover {
  color: var(--title_color);
}

.block_topic .block_topic_more {
  text-align: center;
  margin-top: calc(var(--general_layout_spacing) * 0.5);
}

.block_topic .block_topic_more a {
  margin: 0;
}

@media (max-width: 767px) {
  .block_topic .topic_list ul {
    display: block;
  }
  .block_topic .topic_list li {
    margin-bottom: 30px;
  }
  .block_topic .topic_list li:last-child {
    margin-bottom: 0;
  }
  .block_topic .topic_iamge {
    margin-bottom: 20px;
  }
}

{% endstylesheet %}

{% assign textAlign = "left, center, right" | split: ", " %}
{% assign index = section.settings.text_alignment |  abs %}
<div class="block_topic">
	<div class="container_wrapper {% if section.settings.full_screen %}full_container_wrapper{% endif %}">
		{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

			<!-- 1fr -->
			<div class="topic_list topic_list_{{ section.settings.pc_number }}">
					<ul style=" grid-template-columns: repeat({{ section.settings.pc_number  }}, 1fr);">
							{% assign topics_ids = section.blocks | get_array_values: "topic" | get_array_values: "id" | join: "," %}
						 
							{% if section.blocks.size %}
							{% get_topics ids={topics_ids} %}
							{% for block in section.blocks %}
							{% assign id = block.topic.id %}
								{% if topics[id].size > 1  %} 
									{% assign topic = topics[id] %}
										<li style="text-align: {{ textAlign[index]  }} ;">
												{% if section.settings.cover_picture %}
													{%- if topic.image_alt == "" -%}
														{% assign topic_alt = topic | image_alt:'topic'   %}
													{%- else -%}
														{% assign topic_alt = topic.image_alt %}
													{%- endif -%}
												<a class="topic_iamge" href="/topics/{{ topic.handle }}">
													<img class="lazyload" data-src="{{topic.src|public_front_asset_url}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ topic_alt }}">
												</a>
												{% endif %}
												<a class="topic_name text-white-space" href="/topics/{{ topic.handle }}">{{ topic.title }}</a>
												{% if section.settings.topic_descript %}
												<div class="topic_descript line-clamp2" style="text-align: {{ textAlign[index]  }} ;">{{ topic.descript }}</div>
												{% endif %}
												{% if section.settings.read_now %}
												<a class="topic_more" href="/topics/{{ topic.handle }}">{{section.settings.read_now}}</a>
												{% endif %}
										</li>
										{% else %}
										<li style="text-align: {{ textAlign[index] }} ;">
											{% if section.settings.cover_picture %}
											<a class="topic_iamge" href="javascript:;" data-tips="Please select blog">
												<img src="{{  'empty.png' | public_asset_abs_dir_url }}">
											</a>
											{% endif %}
											<a class="topic_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
											{% if section.settings.topic_descript %}
											<div class="topic_descript" style="text-align: {{ textAlign[index] }} ;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
											{% endif %}

											{% if section.settings.read_now %}
											<a class="topic_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
											{% endif %}
										 </li>
								{% endif %}

							{% endfor %}
							{% else %}
							{% for i in (1..section.settings.pc_number) %}
							<li style="text-align: {{ textAlign[index] }} ;">
									{% if section.settings.cover_picture %}
									<a class="topic_iamge" href="javascript:;" data-tips="Please select blog">
										<img src="{{  'empty.png' | public_asset_abs_dir_url }}">
									</a>
									{% endif %}
									<a class="topic_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
									{% if section.settings.topic_descript %}
									<div class="topic_descript" style="text-align: {{ textAlign[index] }} ;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
									{% endif %}

									{% if section.settings.read_now %}
									<a class="topic_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
									{% endif %}
							</li>
							{% endfor %}
							{% endif %}
					</ul>
			</div>
			{% if section.settings.more_text != ""%}
			<div class="block_topic_more"><a class="secondary_btn" href="/topics">{{ section.settings.more_text }}</a></div>
			{% endif %}
	</div>
</div>

{% schema %}
{
	"tag": "section",
	"class": "block_blogs",
	"is_global": false,
	"name": {
		"zh_CN": "专题",
		"en_US": "Topic list"
	},
	"max_blocks": 10,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "From our blog"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Detail"
		},
		{
			"type": "card_switch",
			"id": "full_screen",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			}
		},
		{
			"type": "card_switch",
			"id": "cover_picture",
			"label": {
				"zh_CN": "显示封面图片",
				"en_US": "Show cover image"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "topic_descript",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show a short description"
			}
		},
		{
			"type": "card_select",
			"id": "text_alignment",
			"label": {
				"zh_CN": "文字对齐方式",
				"en_US": "Text alignment"
			},
			"option": [
				{
					"label": {
						"zh_CN": "左对齐",
						"en_US": "Left aligned"
					},
					"value": "0"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "1"
				},
				{
					"label": {
						"zh_CN": "右对齐",
						"en_US": "Right align"
					},
					"value": "2"
				}
			],
			"default": "0"
		},
		{
			"type": "card_slider",
			"id": "pc_number",
			"max": "6",
			"min": "2",
			"label": {
				"zh_CN": "每排数量",
				"en_US": "Number per row"
			},
			"info": {
				"zh_CN": "只对pc有效",
				"en_US": "PC only"
			},
			"default": "3"
		},
		{
			"type": "card_input",
			"id": "read_now",
			"label": {
				"zh_CN": "阅读全文文案",
				"en_US": "Read the full text"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "专题",
				"en_US": "Topic list"
			},
			"type": "topic-items",
			"settings": [
				{
					"type": "card_topic",
					"id": "topic",
					"label": {
						"zh_CN": "专题",
						"en_US": "Topic list"
					},
					"default": {
						"id": "",
						"title": ""
					}
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Topic",
			"detail": "",
			"full_screen": false,
			"cover_picture": true,
			"topic_descript": true,
			"text_alignment": "1",
			"pc_number": "3",
			"read_now": "Read More >",
			"more_text": "View More"
		},
		"blocks": [
			{
				"topic": {
					"id": "",
					"title": ""
				},
				"block_type": "topic-items"
			},
			{
				"topic": {
					"id": "",
					"title": ""
				},
				"block_type": "topic-items"
			},
			{
				"topic": {
					"id": "",
					"title": ""
				},
				"block_type": "topic-items"
			}
		]
	},
	"icon": "icon-zhuanti1"
}
{% endschema %}